<template>
  <div>
    <van-nav-bar left-arrow title="新增拜访信息" @click-left="onClickLeft" />
    <div class="field_header">
      <van-field
        v-model="value1"
        label="客户名称"
        right-icon="arrow-down"
        :placeholder="this.$route.params.name"
        required
        @click-right-icon="goSelectCustomer"
      />
    </div>
    <van-field
      required
      readonly
      clickable
      name="picker"
      :value="value2"
      label="拜访标题"
      right-icon="arrow"
      @click="showPicker1 = true"
    />
    <van-popup v-model="showPicker1" position="bottom">
      <van-picker
        show-toolbar
        :columns="columnstitle"
        @confirm="onConfirm1"
        @cancel="showPicker1 = false"
      />
    </van-popup>
    <van-field
      required
      readonly
      clickable
      name="picker"
      :value="value3"
      label="拜访原因"
      right-icon="arrow"
      @click="showPicker = true"
    />
    <van-popup v-model="showPicker" position="bottom">
      <van-picker
        show-toolbar
        :columns="columns"
        @confirm="onConfirm"
        @cancel="showPicker = false"
      />
    </van-popup>
   <van-field
        readonly
        clickable
        name="datetimePicker"
        :value="value4"
        label="拜访时间"
        required
        @click="showPicker4 = true"
      />
      <van-popup v-model="showPicker4" position="bottom">
        <van-datetime-picker
          v-model="currentDate"
          type="date"
          :columns-order="['year', 'month', 'day']"
          :formatter="formatter"
          @confirm="onConfirm4"
          @cancel="showPicker4 = false"
        />
      </van-popup>
    <van-field
      v-model="message"
      rows="3"
      autosize
      label="拜访地址"
      type="textarea"
      placeholder="请输入"
      show-word-limit
    />
     <van-field
      v-model="message1"
      rows="4"
      autosize
      label="拜访情况"
      type="textarea"
      placeholder="请输入"
      show-word-limit
    />
     <van-field
      v-model="message2"
      rows="3"
      autosize
      label="竞争信息收集情况"
      type="textarea"
      placeholder="请输入"
      show-word-limit
    />
    <van-button color="#003399"  round type="info" @click="Increase"
      >保存</van-button
    >
  </div>
</template>

<script>
import { visitTJ } from "../request/api";
export default {
  data() {
    return {
      value1: "",
      value2: "",
      value3: "",
      value4: "",
      currentDate: new Date(),
      showPicker4: false,
      columns: ["例行走访", "售中支撑", "售前支撑", "售后支撑"],
      columnstitle:['商务请求'],
      showPicker: false,
      showPicker1: false,
      message: "",
      message1: "",
      message2: "",
    };
  },
  created(){
    console.log(this.$route.params.name);
  },
  methods: {
    onClickLeft() {
      this.$router.push('/vsitlist');
    },
    onConfirm1(value) {
      this.value2 = value;
      this.showPicker1 = false;
    },
    onConfirm(value) {
      this.value3 = value;
      this.showPicker = false;
    },
     onConfirm4(time) {
      console.log(time);
      const d = new Date(time);
      let year = d.getFullYear(); //年
      let month = d.getMonth() + 1; //月
      let day = d.getDate(); //日
      let hours = d.getHours(); //时
      let minutes = d.getMinutes(); //分
      let seconds = d.getSeconds(); //秒
      month = month < 10 ? "0" + month : (month = month);
      day = day < 10 ? "0" + day : (day = day);
      hours = hours < 10 ? "0" + hours : (hours = hours);
      minutes = minutes < 10 ? "0" + minutes : (minutes = minutes);
      seconds = seconds < 10 ? "0" + seconds : (seconds = seconds);

      let resDate =`${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
      this.value4 =resDate;
      this.showPicker4 = false;
    },
    formatter(type, val) {
      if (type === "year") {
        return `${val}年`;
      } else if (type === "month") {
        return `${val}月`;
      } else if (type === "day") {
        return `${val}日`;
      }
      return val;
    },
    Increase(){
        visitTJ({
      custId:this.$route.params.id,
      custName:this.$route.params.name,
      visitTime:this.value4,
      visitAddress:this.message,
      visitTitle:this.value2,
      visitReason:this.value3,
      visitSituation:this.message1,
      collectSituation:this.message2,
    }).then((res) => {
      console.log(res);
    });
    },
    goSelectCustomer(){
        this.$router.push("/selectCustomer")
    }
  },
};
</script>
 
<style lang = "less" scoped>
/deep/ .van-nav-bar {
  background-color: #003399;
}
/deep/.van-nav-bar__title {
  color: #fff;
}
/deep/.van-icon-arrow-left::before {
  font-size: 20px;
  color: #fff;
}
.field_header {
  margin: 10px 0;
}
.van-button {
  position: fixed;
  left: 11px;
  bottom: 8px;
  width: 355px;
  height: 44px;
}
.van-picker__cancel{
    color: #003399;
}
.van-picker__confirm{
    color: #003399;
}
</style>